<template>
  <a-form auto-label-width size="small" layout="inline">
    <div class="component-box">
      <div>搜索配置</div>
      <a-form-item label="显示冒号">
        <a-switch v-model="option.form.colon" />
      </a-form-item>
      <a-form-item label="表单大小">
        <a-select v-model="option.form.size" :options="formSize" />
      </a-form-item>
      <a-form-item label="表单样式">
        <a-popover title="CSS" trigger="click" position="left" :content-style="`width:500px`">
          <a-button>css编辑</a-button>
          <template #content>
            <ma-code-editor v-model="option.form.style" language="css" />
          </template>
        </a-popover>
      </a-form-item>
    </div>
    <div class="component-box">
      <div>标签配置</div>
      <a-form-item label="隐藏标签">
        <a-switch v-model="option.form.hideLabel" />
      </a-form-item>
      <a-form-item label="自动标签宽度">
        <a-switch v-model="option.form.autoLabelWidth">自动宽度</a-switch>
      </a-form-item>
      <a-form-item v-if="!option.form.autoLabelWidth" label="标签宽度">
        <a-input-number v-model="option.form.labelWidth" />
      </a-form-item>
      <a-form-item label="标签对齐">
        <a-select v-model="option.form.labelAlign" :options="formLabelAlign" />
      </a-form-item>
      <a-form-item label="标签颜色">
        <xiri-form option="color" v-model="option.form.labelFontColor" />
      </a-form-item>
      <a-form-item label="表单样式">
        <a-popover title="CSS" trigger="click" position="left" :content-style="`width:500px`">
          <a-button>css编辑</a-button>
          <template #content>
            <ma-code-editor v-model="option.form.labelStyle" language="css" />
          </template>
        </a-popover>
      </a-form-item>
    </div>
    <div class="component-box">
      <div>查询按钮配置</div>
      <a-form-item label="是否显示">
        <a-switch v-model="option.searchBtn.show" />
      </a-form-item>
      <a-form-item label="按钮文本">
        <xiri-form v-model="option.searchBtn.text" />
      </a-form-item>
      <a-form-item label="图标">
        <xiri-form v-model="option.searchBtn.icon" option="icon" />
      </a-form-item>
    </div>
    <div class="component-box">
      <div>重置按钮配置</div>
      <a-form-item label="是否显示">
        <a-switch v-model="option.resetBtn.show" />
      </a-form-item>
      <a-form-item label="按钮文本">
        <xiri-form v-model="option.resetBtn.text" />
      </a-form-item>
      <a-form-item label="图标">
        <xiri-form v-model="option.resetBtn.icon" option="icon" />
      </a-form-item>
    </div>
    <div class="component-box">
      <div>清空按钮配置</div>
      <a-form-item label="是否显示">
        <a-switch v-model="option.clearBtn.show" />
      </a-form-item>
      <a-form-item label="按钮文本">
        <xiri-form v-model="option.clearBtn.text" />
      </a-form-item>
      <a-form-item label="图标">
        <xiri-form v-model="option.clearBtn.icon" option="icon" />
      </a-form-item>
    </div>
  </a-form>
</template>
<script setup>
import { formLabelAlign, formSize } from "@/utils/dict"
import XiriForm from "@cps/xiriForm.vue"

const attrs = useAttrs()
const option = attrs.option
</script>

<style scoped></style>
